<template>
	<div class="My-body">
		<div class="My-head"></div>
		<p class="nm">无伤</p>
		<div class="nm_p">
			<p class="p1">Hello World</p>
			<p class="p2">你好呀</p>
		</div>
		<div class="My-box">
			<div class="box_1">
				<div>
					<h4>文章</h4>
					<p>{{article}}</p>
				</div>
			</div>
			<div class="box_1">
				<div>
					<h4>用户</h4>
					<p>{{people}}</p>
				</div>
			</div>
			<div class="box_1">
				<div>
					<h4>评论</h4>
					<p>{{message}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,onMounted,onUnmounted
	} from 'vue';
	import emitter from '../../../../utils/evenBus';
	import axios from 'axios';

	const article = ref(0);
	const people = ref(0);
	const message = ref(0);
	
	const handleArticle = (length) => {
	  article.value = length;
	};
	function getXinxi(){
		const res = axios.get("/api/user/selectCount");
		res
			.then(response => {
				// console.log(response.data);
				if (response.data.code == 200) {
					people.value=response.data.data;
				} else {
					console.log(' 获取用户数失败:', response.data.msg);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
		const res2 = axios.get("/api/message/selectCount");
		res2
			.then(response => {
				// console.log(response.data);
				if (response.data.code == 200) {
					message.value=response.data.data;
				} else {
					console.log(' 获取用户数失败:', response.data.msg);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}
	
	onMounted(() => {
	  emitter.on('ArticleLength', handleArticle);
	  getXinxi();
	});
	
	onUnmounted(() => {
	  emitter.off('ArticleLength', handleArticle);
	});
</script>

<style lang="scss" scoped>
	.My-body {
		overflow: hidden;
		width: 100%;
		min-width: 150px;
		height: 300px;
		border: none;
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(5px);
		border-radius: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;

		.My-head {
			position: absolute;
			width: 100px;
			height: 100px;
			margin: auto;
			top: 30px;
			border-radius: 50%;
			background-image: url('@/img/logo.png');
			background-size: cover;
			transition: transform 10s ease;
			/* transform: rotate(-180deg); */
		}

		.My-head:hover {
			transition: transform 10s ease;
			transform: rotate(7200deg);

		}

		.nm {
			top: 140px;
			position: absolute;
			font-size: 30px;
			color: #d60000;
		}

		.nm_p {
			width: 120px;
			height: 40px;
			top: 180px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;

			.p1 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 50px;
				font-size: 20px;
			}

			.p2 {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 50px;
				margin-left: -100%;
				font-size: 20px;
			}
		}

		.My-box {
			position: absolute;
			width: 250px;
			height: 80px;
			top: 230px;
			display: flex;
			// justify-content: space-around;

			.box_1 {
				width: 100%;
				height: 100%;
				margin: -10px 0px 0px 0px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				p{
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

	}


	.nm_p:hover .p1 {
		transform: rotateY(-180deg);
	}

	.nm_p .p2 {
		transform: rotateY(180deg);
	}

	.nm_p:hover .p2 {
		transform: rotateY(0deg);
	}

	.p1,
	.p2 {
		backface-visibility: hidden;
	}
</style>